import * as echarts from 'echarts';
import { useEffect,useRef} from 'react';
import {useChannelCount} from '@/hooks/useChannels'

export function BarChart({title}){
    const chartRef = useRef(null)
    const {channelCount} = useChannelCount()
    useEffect(()=>{
        const myChart = echarts.init(chartRef.current);
        const option = {
          title:{text: title},
          xAxis: {
            type: 'category',
            data: ['jave', 'react', 'vue', 'go', 'python']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [channelCount.jave, channelCount.react, channelCount.vue, channelCount.go, channelCount.python],
              type: 'bar'
            }
          ]
        };
        option && myChart.setOption(option);
    },[title,channelCount])
    return <div ref={chartRef} style={{width:"800px",height:"600px"}}></div>
}

		// "jave":   0,
		// "react":  1,
		// "vue":    2,
		// "go":     3,
		// "python": 4,